<template>
  <div class="home">
    <van-nav-bar
        title="E查社保服务平台"
        right-text=""
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="avatar">
      <img src="https://bbs.deepin.org/uc_server/avatar.php?uid=35607&size=big" alt="">
    </div>
    <van-cell-group>
      <van-field
          v-model="username"
          required
          clearable
          label="用户名"
          placeholder="请输入用户名"
      />

      <van-field
          v-model="password"
          type="password"
          label="密码"
          placeholder="请输入密码"
          required
      />
    </van-cell-group>

    <van-button type="info" size="large">登录</van-button>
    <van-button size="large" to="/reg">注册</van-button>
  </div>
</template>

<script>
import { CellGroup, NavBar, Field, Button } from "vant";
export default {
  name: "login",
  data() {
    return {
      username: '',
      password: ''
    }
  },
  components: {
    "van-cell-group": CellGroup,
    "van-nav-bar": NavBar,
    "van-field": Field,
    "van-button": Button
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
  .avatar{width:80px;height: 80px;margin:2em auto;}
  .avatar img{width:100%;height: 100%;border-radius: 50%;}
</style>